<template>
  <div class="projectTable" ref="projectTableRef">
    <div class="">
      <SearchComp :searchForm="searchForm" :searchData="queryString" :searchAction="searchAction"></SearchComp>
    </div>
    <div class="tableComp">
      <TableCompEle ref="multipleTable" :tableBaseConfig="tableBaseConfig" :tableData="tableData" :tableConfig="tableConfig" :isSelect="false"
        :isIndex="false" :isShowPage="true" @getPagination="getList" :queryParams="queryParams">
      </TableCompEle>
    </div>
  </div>
</template>

<script>
// import { projectTypeSelect } from '@/api/techParamConfig.js'
// import { manageList } from '@/api/projectManage'
export default {
  props: {
    year: {
      require: true,
      type: String,
      default: ''
    }
  },
  watch: {
    year: {
      handler() {
        this.initMessage()
      }
    },
    deep: true
  },
  data() {
    return {
      tableBaseConfig: {
        height: '30vh',
        border: false
      },
      queryParams: {
        total: 0,
        currentPage: 1,
        pageSize: 5
      },
      tableData: [],
      tableConfig: [
        {
          prop: 'projectName',
          label: '项目名称'
        },
        {
          prop: 'projectType',
          label: '项目种类'
        },
        {
          prop: 'projectStage',
          label: '项目阶段'
        },
        {
          prop: 'projectExpenditure',
          label: '项目经费(万元)'
        }
      ],

      queryString: {
        projectType: ''
      },
      searchForm: {
        changeMethod: () => {
          this.queryParams.currentPage = 1
          this.getList()
        },
        formData: [
          {
            type: 'Select',
            label: '项目种类：',
            prop: 'projectType',
            clearable: true,
            icon: 'el-icon-search',
            placeholder: '请选择项目种类',
            options: []
          }
        ]
      },
      searchAction: [
        {
          label: '查询',
          type: 'primary',
          handle: () => {
            this.queryParams.currentPage = 1
            this.getList()
          }
        },
        {
          label: '重置',
          type: 'primary',
          plain: true,
          handle: () => {
            this.queryString = {
              projectType: ''
            }
            this.queryParams.currentPage = 1
            this.getList()
          }
        }
      ]
    }
  },
  mounted() {
    // projectTypeSelect({}).then(res => {
    //   this.searchForm.formData[0].options = res?.data?.map(item => {
    //     return {
    //       value: item.projectType,
    //       label: item.projectType
    //     }
    //   })
    // })
    this.getList()
  },
  methods: {
    getList() {
      // manageList(
      //   Object.assign(this.queryString, {
      //     year: this.year,
      //     currentPage: this.queryParams.currentPage,
      //     pageSize: this.queryParams.pageSize
      //   })
      // ).then(res => {
      //   if (res.data && res.data.list) {
      //     this.tableData = res.data.list
      //     this.queryParams.total = res.data.total
      //     // this.initScroll()
      //   } else {
      //     this.tableData = []
      //   }
      // })
    },
    // 数据滚动
    initScroll() {
      // 拿到table挂在后的真实DOM
      const table = this.$refs.projectTableRef
      // 拿到挂在数据的div
      const divData = table
      // 鼠标移入停止滚动
      divData.onmouseover = () => {
        clearInterval(this.t)
      }
      // 初次调用
      this.start(divData)
      // 鼠标移出开始滚动
      divData.onmouseout = () => {
        this.start(divData)
      }
    },
    start(divData) {
      if (divData.clientHeight > divData.scrollHeight) {
        return
      }
      this.t = setInterval(() => {
        divData.scrollTop += 1
        if (divData.clientHeight + divData.scrollTop == divData.scrollHeight) {
          divData.scrollTop = 0
        }
      }, 100)
    }
  }
}
</script>

<style lang="less" scoped>
  .projectTable {
    position: relative;
    height: 96%;
    // overflow: hidden;
  }
  .tableComp {
    height: 90%;
    > div {
      height: 100%;
    }
  }

  ::v-deep {
    .el-form-item--small.el-form-item {
      margin-bottom: 0;
    }
    .el-form-item__label {
      color: #eafff0;
    }
    .el-input__inner {
      background: transparent;
      border-color: #7cb4ff;
    }
    .el-table .el-table__header-wrapper th,
    .el-table .el-table__fixed-header-wrapper th {
      font-family: PingFangSC-Medium;
      font-size: 14px !important;
      font-weight: 500;
    }
    .el-table {
      height: calc(100% - 100px);
      font-family: PingFangSC-Regular;
      font-size: 14px !important;
      color: #eafff0;
      font-weight: 400;
      background-color: transparent !important;
    }
    .el-table th.el-table__cell > .cell {
      font-size: 14px !important;
      color: #7cb4ff !important;
    }
    .el-table td.el-table__cell div {
      font-size: 14px !important;
    }
    .el-table th,
    .el-table tr,
    .el-table td {
      height: 30px;
      line-height: 30px;
      background-color: transparent !important;
    }

    .el-table td.el-table__cell,
    .el-table th.el-table__cell.is-leaf {
      border-bottom: 0px solid #ebeef5;
    }

    .el-table_row {
      background-color: transparent !important;
    }
    .el-table::before {
      //去除底部白线
      background-color: transparent !important;
    }
    .pagination-container {
      padding: 10px 16px;
      background: transparent !important;
    }
    .el-pagination__total,
    .el-input__inner,
    .el-pagination__jump {
      color: #eafff0;
    }
    .btn-prev {
      // background: transparent !important;
    }
    .el-table__body-wrapper {
      &::-webkit-scrollbar {
        width: 0px;
        background-color: #f1f1f1;
        border-radius: 5px;
      }

      &::-webkit-scrollbar-thumb {
        background-color: #888;
        border-radius: 5px;
      }

      &::-webkit-scrollbar-thumb:hover {
        background-color: #555;
      }
    }
  }
</style>